<template>
<div class="container" ref="wrapper">

    <div>


        <!-- 当前城市 -->
        <div class="adress">
            <div class="title">当前城市</div>
            <div class="button_list">
                <div class="button_wrap">
                    <div class="button">{{city}}</div>
                </div>
            </div>
        </div>

    
        <!-- 热门城市 -->
        <div class="adress">
            <div class="title">热门城市</div>
            <div class="button_list">
                <div class="button_wrap">
                    <div class="button"
                        v-for="item in hotCity"
                        :key="item.id"
                        @click="gotoHome(item.name)"
                     >
                        {{item.name}}
                    </div>
                </div>
            </div>

        </div>

        <!-- 城市选择列表 -->
        <div class="adress" 
            v-for="(item,key) in cityList"
            :key="key"
            :ref="key"
         >
            <div class="title">{{key}}</div>
            <div class="list">
                <div class="item"
                    v-for="item2 in item"
                    :key="item2.id"
                    @click="gotoHome(item2.name)"
                >
                {{item2.name}}
                </div>
            </div>
        </div>


    </div>

</div>
</template>

<script>

   import data from '@/assets/city.json'
   import { mapState,mapMutations,mapActions } from 'vuex';

export default {
    data() {
        return {
           hotCity:[],
           cityList:{}
        };
    },
    props:['sendCityLetter'],

    methods: {
        ...mapMutations(['changeCity']),
        ...mapActions(['gotoHome']),
    },
    mounted(){
        this.hotCity = data.data.hotCities
        this.cityList = data.data.cities

        this.$emit("sendList",data.data.cities)

    },

    computed:{
        ...mapState(['city'])
    },

    components:{
        
    },

    watch:{

        sendCityLetter(){
            // console.log(this.sendCityLetter);
            if(this.sendCityLetter){
                console.log(this.sendCityLetter);
                
                let element = this.$refs[this.sendCityLetter][0]
                console.log(element);
                
                // this.scroll.scrollToElement(element)
            }
            
        }
    }


    }
</script>


<style scoped lang="less">

.container{
    padding-top: 25.333vw;
    margin-right: 6.667vw;

    .adress{

        .title{
            background-color: #eee;
            border-bottom: 1px solid #87cefa;
            padding: 2.667vw 0 1.333vw 1.333vw;
        }

        .button_list{
            padding: 1.333vw 2.667vw;
            .button_wrap{
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                

                .button{
                    margin: 1.333vw 0.8vw;
                    display: flex;
                    width: 30.3%;
                    border: 1px solid #999;
                    padding: 0.8vw 0;
                    justify-content: center;
                    flex-wrap: wrap;
                }
            }
        }

        .list{
            padding-left: 15px;
            .item{
                padding: 1.067vw 0;
                border-bottom: 1px solid #ededed;
            }
        }
    }

}

</style>